

import Link from 'next/link'
import { pinyin } from 'pinyin-pro';
import Title from '@/components/Title'
import More from '@/assets/more.png'
import hotscore from '@/assets/hotscore.png'
import styles from './styles.module.scss'
import Image from '@/components/Image'
import { useMemo } from 'react';
const web = process.env.NEXT_PUBLIC_XQWEB
const HotScore = ({ hotMatch }) => {
  const link = (row) => {
    const url = {
      [process.env.NEXT_PUBLIC_Football]: "/onlinelive/football",
      [process.env.NEXT_PUBLIC_Basketball]: "/onlinelive/basketball"
    }
    return Reflect.get(url, row?.eventType) + `/${row?.en}/${row?.eventId}`
  }
  const hotMatchData = useMemo(() => hotMatch?.map(row => ({
    ...row, en: pinyin(row?.eventName, { toneType: 'none', type: "array" })?.join("")
  })), [])
  return (
    <>
      <Title img={hotscore} text='热门联赛'></Title>
      <nav className={styles.hotScore}>
        {
          hotMatchData.map(row => (
            <Link href={link(row)} key={row?.id} >
              <a target="_blank" title={row?.eventName}>
                <Image src={row?.logo} alt={row?.eventName} type={row?.eventType}></Image>
                {/* <img src={row?.logo} /> */}
                <span>{row?.eventName}</span>
              </a>
            </Link>
          ))
        }
        <Link href={web}>
          <a>
            <img src={More.src} alt="" className={styles.more} />
            <span>查看更多</span>
          </a>
        </Link>
      </nav>
    </>
  )
}

export default HotScore